<template>
  <div>
    <h1>多语言实现原理</h1>
    <div>
      <el-button @click="lang='zh'">中文</el-button>
      <el-button @click="lang='en'">英文</el-button>
    </div>
    <div class="content">
      {{ t('hello') }},vue!
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lang: 'zh',
      message: {
        zh: {
          hello: '你好'
        },
        en: {
          hello: 'hello'
        }
      }
    }
  },
  methods: {
    t(content) {
      const curLang = this.message[this.lang]
      const value = curLang[content]
      return value
    }
  }
}
</script>

<style>

</style>
